<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>技术社区 - 商场</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: "Microsoft Yahei", sans-serif;
      background-color: #f5f7fa;
    }
    .header {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-bottom: 1px solid #e4e7ed;
      padding: 0 20px;
    }
    .logo {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    .logo img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .logo h1 {
      font-size: 1.5rem;
      color: #303133;
    }
    .nav {
      display: flex;
      margin-right: auto;
    }
    .nav a {
      display: block;
      padding: 20px;
      text-decoration: none;
      color: #606266;
      font-size: 1rem;
    }
    .nav a.active {
      color: #409EFF;
      border-bottom: 2px solid #409EFF;
    }
    .search {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    .search input {
      width: 300px;
      height: 32px;
      border: 1px solid #dcdcdc;
      border-radius: 4px 0 0 4px;
      padding: 0 10px;
      outline: none;
    }
    .search button {
      height: 32px;
      border: 1px solid #409EFF;
      border-radius: 0 4px 4px 0;
      background-color: #409EFF;
      color: #fff;
      padding: 0 15px;
      cursor: pointer;
    }
    .user {
      display: flex;
      align-items: center;
    }
    .user a {
      text-decoration: none;
      color: #606266;
      margin: 0 10px;
      font-size: 0.9rem;
    }
    .container {
      display: flex;
      padding: 20px;
    }
    .product-list {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .product-card {
      width: calc(33.333% - 20px);
      background-color: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .product-card img {
      width: 100%;
      height: 200px;
      object-fit: contain;
      margin-bottom: 10px;
    }
    .product-info {
      width: 100%;
    }
    .product-info h3 {
      font-size: 1rem;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .product-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .product-card button {
      width: 100%;
      height: 32px;
      background-color: #409EFF;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .product-card button:disabled {
      background-color: #c0c4cc;
      cursor: not-allowed;
    }
    .cart {
      width: 300px;
      margin-left: 20px;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 15px;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e4e7ed;
    }
    .cart-header h2 {
      font-size: 1.2rem;
      margin: 0;
    }
    .cart-item {
      display: flex;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e4e7ed;
    }
    .cart-item img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      margin-right: 10px;
    }
    .cart-item-info {
      flex: 1;
    }
    .cart-item-info h4 {
      font-size: 0.9rem;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cart-item-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cart-item-meta .price {
      color: #f56c6c;
    }
    .cart-item-meta .count {
      display: flex;
      align-items: center;
    }
    .cart-item-meta .count button {
      width: 24px;
      height: 24px;
      border: 1px solid #dcdcdc;
      background-color: #fff;
      cursor: pointer;
    }
    .cart-item-meta .count input {
      width: 30px;
      height: 24px;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      text-align: center;
      outline: none;
    }
    .cart-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 0;
    }
    .cart-empty img {
      width: 80px;
      height: 80px;
      margin-bottom: 10px;
    }
    .cart-empty p {
      color: #909399;
      font-size: 0.9rem;
    }
    .cart-total {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #e4e7ed;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cart-total .total-price {
      font-size: 1.1rem;
      color: #f56c6c;
    }
    .cart-total button {
      width: 100px;
      height: 32px;
      background-color: #409EFF;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .footer {
      background-color: #fff;
      border-top: 1px solid #e4e7ed;
      padding: 20px;
      text-align: center;
      color: #606266;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="logo">
      <img src="./static/images/logo.png" alt="技术社区logo" />
      <h1>技术社区</h1>
    </div>
    <div class="nav">
      <a href="#">首页</a>
      <a href="#">文章</a>
      <a href="#">课程</a>
      <a href="#" class="active">商场</a>
    </div>
    <div class="search">
      <input type="text" placeholder="请输入搜索关键词" />
      <button>搜索</button>
    </div>
    <div class="user">
      <a href="login.html">登录</a>
      <a href="register.html">注册</a>
    </div>
  </div>

  <div class="container">
    <div class="product-list">
      <div class="product-card">
        <img src="./static/images/product01.png" alt="代码新秀徽章" />
        <div class="product-info">
          <h3>IT社区文创：「代码新秀闪耀」荣誉徽章</h3>
          <div class="product-meta">
            <span>价格：¥10.00</span>
            <span>库存：200</span>
          </div>
          <button onclick="addToCart(1)">加入购物车</button>
        </div>
      </div>
      <div class="product-card">
        <img src="./static/images/product02.png" alt="极简主义帆布包" />
        <div class="product-info">
          <h3>【it社区文创】「极简主义」帆布包</h3>
          <div class="product-meta">
            <span>价格：¥50.00</span>
            <span>库存：100</span>
          </div>
          <button onclick="addToCart(2)">加入购物车</button>
        </div>
      </div>
      <div class="product-card">
        <img src="./static/images/product03.png" alt="百搭T恤衫" />
        <div class="product-info">
          <h3>蓝字魔法，解锁IT新风尚——百搭T恤衫</h3>
          <div class="product-meta">
            <span>价格：¥60.00</span>
            <span>库存：100</span>
          </div>
          <button onclick="addToCart(3)">加入购物车</button>
        </div>
      </div>
      <div class="product-card">
        <img src="./static/images/product04.png" alt="高端皮质笔记本" />
        <div class="product-info">
          <h3>高端皮质IT笔记本，简约设计尽显专业气质</h3>
          <div class="product-meta">
            <span>价格：¥30.00</span>
            <span>库存：50</span>
          </div>
          <button onclick="addToCart(4)">加入购物车</button>
        </div>
      </div>
    </div>

    <div class="cart">
      <div class="cart-header">
        <h2>购物车 (0)</h2>
      </div>
      <div id="cartEmpty" class="cart-empty">
        <img src="./static/images/empty-cart.png" alt="购物车为空" />
        <p>购物车是空的</p>
      </div>
      <div id="cartItems" style="display: none;">
        <!-- 购物车商品将通过JS动态生成 -->
      </div>
      <div id="cartTotal" style="display: none;" class="cart-total">
        <div class="total-price">总价：¥0.00</div>
        <button>结算</button>
      </div>
    </div>
  </div>

  <div class="footer">
    <p>联系我们 电话：123456789 邮箱：xxx@xxx.com</p>
    <p>软件开发工作室版权所有</p>
  </div>

  <script>
    // 商品数据
    const products = [
      {
        id: 1,
        name: "IT社区文创：「代码新秀闪耀」荣誉徽章",
        price: 10.00,
        stock: 200,
        img: "./static/images/product01.png"
      },
      {
        id: 2,
        name: "【it社区文创】「极简主义」帆布包",
        price: 50.00,
        stock: 100,
        img: "./static/images/product02.png"
      },
      {
        id: 3,
        name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
        price: 60.00,
        stock: 100,
        img: "./static/images/product03.png"
      },
      {
        id: 4,
        name: "高端皮质IT笔记本，简约设计尽显专业气质",
        price: 30.00,
        stock: 50,
        img: "./static/images/product04.png"
      }
    ];

    // 购物车数据，从本地存储获取或初始化
    let cart = JSON.parse(localStorage.getItem('cart')) || [];

    // 渲染购物车
    function renderCart() {
      const cartItemsEl = document.getElementById('cartItems');
      const cartEmptyEl = document.getElementById('cartEmpty');
      const cartTotalEl = document.getElementById('cartTotal');
      const totalPriceEl = cartTotalEl.querySelector('.total-price');

      if (cart.length === 0) {
        cartItemsEl.style.display = 'none';
        cartTotalEl.style.display = 'none';
        cartEmptyEl.style.display = 'block';
        document.querySelector('.cart-header h2').textContent = '购物车 (0)';
        return;
      }

      cartEmptyEl.style.display = 'none';
      cartItemsEl.style.display = 'block';
      cartTotalEl.style.display = 'block';

      // 生成购物车商品列表
      cartItemsEl.innerHTML = '';
      let totalPrice = 0;

      cart.forEach(item => {
        const product = products.find(p => p.id === item.id);
        if (!product) return;

        totalPrice += product.price * item.count;

        const cartItemEl = document.createElement('div');
        cartItemEl.className = 'cart-item';
        cartItemEl.innerHTML = `
          <img src="${product.img}" alt="${product.name}" />
          <div class="cart-item-info">
            <h4>${product.name}</h4>
            <div class="cart-item-meta">
              <span class="price">¥${product.price.toFixed(2)}</span>
              <div class="count">
                <button onclick="decreaseCount(${item.id})">-</button>
                <input type="number" value="${item.count}" min="1" max="${product.stock}" onchange="updateCount(${item.id}, this.value)" />
                <button onclick="increaseCount(${item.id}, ${product.stock})">+</button>
              </div>
            </div>
          </div>
        `;
        cartItemsEl.appendChild(cartItemEl);
      });

      // 更新总价和购物车标题
      totalPriceEl.textContent = `总价：¥${totalPrice.toFixed(2)}`;
      document.querySelector('.cart-header h2').textContent = `购物车 (${cart.length})`;

      // 保存到本地存储
      localStorage.setItem('cart', JSON.stringify(cart));
    }

    // 添加商品到购物车
    function addToCart(productId) {
      const product = products.find(p => p.id === productId);
      if (!product) return;

      const existingItem = cart.find(item => item.id === productId);
      if (existingItem) {
        if (existingItem.count < product.stock) {
          existingItem.count++;
        } else {
          alert('已达到最大库存');
          return;
        }
      } else {
        cart.push({
          id: productId,
          count: 1
        });
      }

      alert('已添加到购物车');
      renderCart();
    }

    // 减少商品数量
    function decreaseCount(productId) {
      const item = cart.find(item => item.id === productId);
      if (!item) return;

      if (item.count > 1) {
        item.count--;
      } else {
        cart = cart.filter(item => item.id !== productId);
      }

      renderCart();
    }

    // 增加商品数量
    function increaseCount(productId, maxStock) {
      const item = cart.find(item => item.id === productId);
      if (!item) return;

      if (item.count < maxStock) {
        item.count++;
      } else {
        alert('已达到最大库存');
      }

      renderCart();
    }

    // 更新商品数量
    function updateCount(productId, value) {
      const item = cart.find(item => item.id === productId);
      if (!item) return;

      const product = products.find(p => p.id === productId);
      if (!product) return;

      const count = parseInt(value);
      if (isNaN(count) || count < 1) {
        item.count = 1;
      } else if (count > product.stock) {
        item.count = product.stock;
        alert('已超过最大库存');
      } else {
        item.count = count;
      }

      renderCart();
    }

    // 页面加载时渲染购物车
    window.onload = renderCart;
  </script>
</body>
</html>


